<template>
<div>
	<x-dialog v-model="show" style="width:100%">
		<div class="weui-dialog__hd showContent">
			<strong class="weui-dialog__title">{{name}}</strong>
		</div>
		<div class="weui-dialog__bd">
			<divider>沟通人</divider>
			<flexbox :gutter="0" wrap="wrap">
				<flexbox-item :span="1/3"  v-for="(item,index) in users" :key="index">
					<x-button type="warn" class="fa fa-close " style="margin-top:5px;" :mini="true" @click.native="removeUser(index)">{{item.name}}</x-button>
				</flexbox-item>
				<flexbox-item :span="1/2">
					<ab-cust-dialog style="margin-top:5px;" :dialogSetting="{displayFields:[{showName:'姓名',columnName:'fullname'}],multiple:true}" dialogKey="userSelector" :model="newUsers">自由选择</ab-cust-dialog>
				</flexbox-item>
			</flexbox>
			
			<divider>运行方式</divider>
			<checker radio-required v-model="mode" default-item-class="demo5-item" selected-item-class="demo5-item-selected">
		   		<checker-item value="parallel">并行模式</checker-item>
		      	<checker-item value="serial">串行模式</checker-item>
      		</checker>
      		
      		<divider>回收模式</divider>
			<checker radio-required v-model="recovery" default-item-class="demo5-item" selected-item-class="demo5-item-selected">
		   		<checker-item value="complete">完成后回归</checker-item>
		      	<checker-item value="autonomy">自主回收</checker-item>
		      	<checker-item value="auto" style="width:200px;margin-top:5px;">完成后进入下一步</checker-item>
      		</checker>
			
			<divider>沟通原因</divider>
			<textarea style="width: 261px; height: 130px;" v-model="flowParam.opinion" class="weui-input"></textarea>
			
			<divider>消息类型</divider>
			<ab-checkbox v-model="msgType" >
		    	<div slot-scope="scope">
		            <label class=" checkbox-inline" v-for="item in msgList"><input type="checkbox" name="msgType" v-model="scope.tempData.currentValue" :value="item.type"/>{{item.title}}</label>
		        </div>
  			</ab-checkbox>
			<div style="text-align : left;" v-if="msgType">
				<divider>消息内容</divider>
				您有一条新的沟通任务，请及时办理。 沟通原因为：{{flowParam.opinion}}。<br/>
				流程标题为：${流程标题}
			</div>
		</div>
		<div class="weui-dialog__ft">
			<a class="weui-dialog__btn weui-dialog__btn_default" v-on:click="ok()">确定</a>
			<a class="weui-dialog__btn weui-dialog__btn_default" v-on:click="cancel()">取消</a>
		</div>
	</x-dialog>
</div>
</template>

<script>
import Vue from 'vue'
export default {
	props:['passConf','showDialog','name'],
  	data :function () {
    	return {
	    	flowParam:this.passConf,
	   		show : false,
	   		users : [],
	   		mode : "parallel",
	   		msgList : [],
	   		newUsers : [],
	   		recovery : "complete",
	   		msgType : "",
	    }
   	},
   	methods: {
    	ok:function(){
    		if(this.users.length==0){
	    		Vue.tools.toast("请选择沟通人员！","warn");
	    		return ;
	    	}
	    	if(!this.flowParam.opinion){
	    		Vue.tools.toast("请输入沟通原因！","warn");
	    		return ;
	    	}
	    	this.flowParam.extendConf = {
	    		mode : this.mode,
	    		users : this.users,
	    		recovery : this.recovery,
	    		opinion : this.flowParam.opinion,
	    		msgType : this.msgType,
	    	};
	    	this.show = false;
	    	this.$emit('callback',this.flowParam);
	    },
		cancel:function(){
			this.show = false;
			this.$emit('cancel',this.flowParam);
		},
		addUser : function(user){
	    	var exist = false;
	    	this.users.forEach(function(item){
	    		if(item.id==user.id){
	    			exist = true;
	    		}
	    	});
	    	if(!exist){
	    		this.users.push(user);
	    	}
	    },
	    removeUser : function(index){
	    	this.users.splice(index,1);
	    },
   },
   watch:{
	   	showDialog:function(value,oldValue){
		   	this.show = value;
	   	},
		newUsers : function(newVal,oldVal){
		   	if(newVal.length==0){
			   	return;
		   	}
		   	var that = this;
		   	this.newUsers.forEach(function(item){
			   	that.addUser({
				   	id : item.id,
					name : item.name,
					type : "user"//用户
			   	});
		   	});
		   	this.newUsers = [];
		}
 	},
   	created :function(){
   		var that = this;
   		this.show = this.showDialog;
   		
   		var url = Vue.__ctx + "/sys/tools/getInterFaceImpls?classPath=com.dstz.sys.simplemq.handler.msg.AbsNotifyMessageHandler";
 	   	var post = Vue.baseService.post(url,this.flowParam);
 	 	this.$vux.loading.show({ text: 'Loading' });
	   	post.then(function(data){
	   		that.$vux.loading.hide();
	   		that.msgList = data;
	   	});
   	}
}
</script>
<style scoped>
.box {
  padding: 0 15px;
}
.demo1-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
}
.demo1-item-selected {
  border: 1px solid green;
}
.demo5-item {
  width: 100px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin-right: 6px;
}
.demo5-item-selected {
  background: #ffffff url(./active.png) no-repeat right bottom;
  border-color: #ff4a00;
}
</style>
